<template>
  <div class="assets">
    <p class="hongbaoliebiao">红包/代金券列表</p>
    <div class="assets-title">
      <span>红包/代金券编号</span>
      <el-divider direction="vertical"></el-divider>
      <span>红包/代金券名称</span>
      <el-divider direction="vertical"></el-divider>
      <span>用户名称</span>
      <el-divider direction="vertical"></el-divider>
      <span>红包/代金券门槛</span>
      <el-divider direction="vertical"></el-divider>
      <span>红包/代金券优惠金额</span>
      <el-divider direction="vertical"></el-divider>
      <span>优惠截止时间</span>
      <el-divider direction="vertical"></el-divider>
      <span>领取时间</span>
      <el-divider direction="vertical"></el-divider>
      <span>是否过期</span>
      <el-divider direction="vertical"></el-divider>
      <span>使用介绍</span>
    </div>
    <div class="assets-data1" >
      <div class="assets-data" v-for="itme in records" :key="itme">
        <span>{{itme.id}}</span><!-- {{itme.headPortrait}}  ../assets/天天神券.jpg -->
        <span>{{ itme.cashCouponName }}</span>
        <span>{{ itme.userName }}</span>
        <span>{{ itme.threshold }}</span>
        <span>{{ itme.preferentialAmount }}</span>
        <span>{{ itme.deadline }}</span>
        <span>{{ itme.effectiveDate }}</span>
        <span>{{ itme.expired }}</span>
<!--        <span>{{ itme.introductionToUse }}</span>-->
        <el-input class="jieshao" type="text" v-model="itme.introductionToUse"/>
      </div>
    </div>
    <div class="botton">
    <!-- 分页 -->
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :background="true"
          layout="prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: "MyssetsList",
  data() {
    return {
      records: [],
      pageSize:5,
      currentPage:1,
      total:1000
    }
  },
  mounted() {
    this.getAssetsPage();
    this.getAssetaTotal();
  },
  methods: {
    getAssetsPage() {
      this.$axios.get('/assets/page',{
        params: {
          pageNum: this.currentPage
        }
      })
          .then(res => {
            this.records = res.page.records;
          })
    },
    getAssetaTotal(){
      this.$axios.get("/assets/total")
      .then(res => {
        this.total=res.total;
      })
    },
    handleCurrentChange(val){
      this.currentPage=val;
      this.getAssetsPage();
    }
  }
}
</script>

<style>

.hongbaoliebiao{
  font-size: 30px;
  margin-left: 40%;
}

.assets-title {
  margin-top: 30px;
  height: 120px;
  /* margin-top: -15%; */
}

.assets-title > span {
  display: inline-block;
  width: 165px;
}

.assets-data {
  height: 100px;
  margin-bottom: 10px;

}

.assets-data > img {
  height: 80px;
  margin-left: 25px;
  margin-right: 60px;
}

.assets-data1{
  height: 600px;
}

.assets-data > span {
  display: inline-block;
  width: 180px;
  text-align: center;
}

.jieshao{
  width: 180px;
}

.botton{
  margin-top: 10px;

}
</style>
